.main {
  height: 100%;
  position: relative;


  .loginBox {

  padding-top: 1%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 600px;
    width: 360px;
    position: absolute;
    z-index: 999;
    background-color: rgba(220,223,230,.2);
    border-radius: 10px;
    box-shadow: 0 0 15px 5px  rgba(0,0,0,.4);
    .title {
      font-size: 26px;
      margin-bottom: 20px;

      text-align: center;
      background-image: linear-gradient(45deg, rgb(250,132,132), rgb(216,64,59), rgb(255,197,181), rgb(35,64,122));
      background-clip: text;
      background-size: 50% 100%;
      background-position: 50% 50%;
      animation: title 8s  linear infinite ;
      animation-direction: normal;
      color: transparent;
    }


  }

}

.main::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("../../../public/assets/bgc.jpg");
  background-position: 0px -150px;
  opacity: 0.8;
}


@keyframes title {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }

}


